<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			svg{stroke: black;fill: none;width:500px;height:500px;}
			
		</style>
	</head>
	<body>
		<h4>设置patternContentUnits为objectBoundingBox</h4>
		<svg>
			<defs>
				<pattern id="tile" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" x="0" y="0" width=".2" height=".2">
					<path d="M 0 0 Q .05 .20 .10 .10 T .20 .20" style="stroke-width: 0.01;stroke:black;fill:none;" />
					
					<path d="M 0 0 h 0.2 v 0.2 h-0.2z" style="stroke-width: 0.01;stroke:black;fill:none;" />
				</pattern>
			</defs>
			
			<g transform="translate(20,20)">
				<rect x="0" y="0" width="100" height="100" style="fill:url(#tile);stroke: black;" />
			</g>
			
			<g transform="translate(135,20)">
				<rect x="0" y="0" width="70" height="80" style="fill:url(#tile);stroke: black;" />
			</g>
			
			<g transform="translate(220,20)">
				<rect x="0" y="0" width="150" height="130" style="fill:url(#tile);stroke: black;" />
			</g>
		</svg>
		
		<h4>使用viewBox缩放图案</h4>
		<svg>
			<defs>
				<pattern id="t1" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" viewBox="0 0 150 150">
					<path d="M30 100 C 50 50, 70 20,100 100,100,130,45,150,65,100" style="stroke: black; stroke-width: 5;fill:none;" />
				</pattern>
			</defs>
			<rect x="20" y="20" width="100" height="100" style="fill:url(#t1);stroke:black;" />
		</svg>
</html>
